<template>
  <div>
    <el-table
      ref="singleTable"
      :data="cutObj.records"
      highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      style="
        width: 600px;
        height: 200px;
        border: 1px solid #dcdfe6;
        margin: 100px;
      "
    >
      <el-table-column property="classId" width="50"> </el-table-column>
      <el-table-column property="className" label="小班名称 " width="120">
      </el-table-column>
      <el-table-column property="classPerson" label="小班负责人" width="120">
      </el-table-column>
      <el-table-column
        property="classPersonTel"
        label="负责人电话"
      ></el-table-column>
      <el-table-column
        property="regionBean.regionName"
        label="负责区域"
      ></el-table-column>
    </el-table>

    <div class="check">
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="cutObj.pages * 10"
          @current-change="handleChange"
          @click="get()"
          style="margin-left: 100px; margin-bottom: 50px"
        >
        </el-pagination>

        <div style="margin: 20px 100px">
          <el-button @click="addcls()">添加小班</el-button>
          <el-button @click="getclsById1(classId)" style="margin-left: 20px"
            >查看小班信息</el-button
          >
          <br />
          <el-button @click="getclsById(classId)" style="margin-top: 20px"
            >修改小班信息</el-button
          >
        </div>
      </div>
      <div>
        <div>
          <fieldset style="width: 260px">
            <legend>查询小班信息</legend>
            <form action="">
              小班名称：<input
                type="text"
                v-model="className"
                style="margin-top: 20px"
              />
              负责区域：<input
                type="text"
                v-model="regionName"
                style="margin-top: 20px"
              />
              <input
                type="button"
                value="查询"
                style="margin: 20px"
                @click="get()"
              />
            </form>
          </fieldset>
        </div>
      </div>
    </div>

    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">修改小班信息</h1>
      <div class="msg" style="display: flex">
        <div style="width: 300px; margin: 30px auto">
          <p style="margin: 50px 60px">小班名称：{{ clsList.className }}</p>
          <p style="margin: 50px 60px">
            负责人电话： <input type="text" v-model="classPersonTel" />
          </p>
          <p style="margin: 50px 60px">
            负责区域<input type="text" v-model="regionName" />
          </p>
          <p style="margin: 50px 60px">地类:{{ regionBean.regionType }}</p>
          <p style="margin: 50px 60px">
            创建时间：{{ clsList.classCreateDate }}
          </p>
        </div>

        <div>
          <p style="margin: 80px 60px">
            负责人： <input type="text" v-model="classPerson" />
          </p>
          <p style="margin: 50px 60px">人员数量:{{ clsList.classNum }}</p>
          <p style="margin: 50px 60px">林种:{{ regionBean.regionForest }}</p>
          <p style="margin: 50px 60px">优势树种：{{ regionBean.regionTree }}</p>

          <br />
          <input
            type="button"
            @click="update(regionId)"
            value="修改"
            style="margin: 50px"
          />
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title=""
      :visible.sync="dia"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">查看小班信息</h1>
      <div class="msg" style="display: flex">
        <div style="width: 300px; margin: 30px auto">
          <p style="margin: 50px 60px">小班名称：{{ clsList.className }}</p>
          <p style="margin: 50px 60px">
            负责人电话：{{ clsList.classPersonTel }}
          </p>
          <p style="margin: 50px 60px">负责区域：{{ regionBean.regionName }}</p>
          <p style="margin: 50px 60px">地类:{{ regionBean.regionType }}</p>
          <p style="margin: 50px 60px">
            创建时间：{{ clsList.classCreateDate }}
          </p>
        </div>

        <div>
          <p style="margin: 80px 60px">负责人：{{ clsList.classPerson }}</p>
          <p style="margin: 50px 60px">人员数量:{{ clsList.classNum }}</p>
          <p style="margin: 50px 60px">林种:{{ regionBean.regionForest }}</p>
          <p style="margin: 50px 60px">优势树种：{{ regionBean.regionTree }}</p>

          <br />
          <input
            type="button"
            @click="dia = false"
            value="返回"
            style="margin: 50px"
          />
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title=""
      :visible.sync="dialog"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">添加小班</h1>
      <div class="msg" style="display: flex">
        <div style="width: 300px">
          <p style="margin: 50px 30px; width: 260px">
            名称：<input type="text" v-model="className" />
          </p>
          <p style="margin: 50px 30px; width: 260px">
            负责人电话：<span> </span>
            <input type="text" v-model="classPersonTel" />
          </p>
          <p style="margin: 50px 30px">
            <!-- 负责区域：
            <select v-model="regionId">
              <option value="1">雅安一号地区</option>
              <option value="2">雅安二号地区</option>
              <option value="3">宜宾一号地区</option>
              <option value="4">双流一号地区</option>
            </select> -->

              负责区域：
              <el-select
                v-model="regionId"
                placeholder="请选择"
              >
               <el-option
                  v-for="item in regionlist"
                  :key="item.regionId"
                  :label="item.regionName"
                  :value="item.regionId">
              </el-option>

               </el-select>
          </p>
        </div>

        <div>
          <p style="margin: 50px 60px">
            负责人： <input type="text" v-model="classPerson" />
          </p>
          <p style="margin: 50px 60px">
            人员数量: <input type="text" v-model="classNum" />
          </p>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add()">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      pageNo: "",
      pages: "",
      classId: "",
      className: "",
      classPerson: "",
      classPersonTel: "",
      classNum: "",
      classCreateDate: "",
      regionId: "",
      regionName: "",
      regionBean: "",
      regionType: "",
      regionForest: "",
      regionTree: "",
      clsList: [],
      regionlist:[],
      dialogVisible: false,
      dialog: false,
      dia: false,
    };
  },
  computed: {
    ...mapState("cls", ["cutObj", "param"]),
  },
  methods: {
    ...mapMutations("cls", ["setParam"]),
    ...mapActions("cls", ["findByItem"]),

    handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    get(){
      let paramObj = this.param;
      paramObj.className = this.className;
      paramObj.regionName = this.regionName;
      // 把最新的信息装入 store中的 param对象中
      this.setParam(paramObj);
      this.findByItem();
    },
    cut(pageNo) {
      let paramObj = this.param;
      paramObj.pageNo = pageNo;
      this.setParam(paramObj);
      this.findByItem();
    },
    async getclsById(classId) {
      let paramobj = { classId: classId };

      let clsObj = await this.ajax.getSubmit("/api/cls/findClass", paramobj);

      console.log(clsObj);

      this.clsList = clsObj;

      this.regionBean = this.clsList.regionBean;

      this.dialogVisible = true;
    },
    async getclsById1(classId) {
      let paramobj = { classId: classId };

      let clsObj = await this.ajax.getSubmit("/api/cls/findClass", paramobj);

      console.log(clsObj);

      this.clsList = clsObj;

      this.regionBean = this.clsList.regionBean;

      this.dia = true;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleTableRow(row) {
      console.log(row.classId);

      this.classId = row.classId;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addcls() {
      this.dialog = true;
    },

    async add() {
      console.log(this.regionId);

      let clsobj = {

          className: this.className,
          classPerson: this.classPerson,
          classPersonTel: this.classPersonTel,
          classNum: this.classNum,
          regionId: this.regionId,

      };

      let Obj = await this.ajax.getSubmit("/api/cls/addClass", clsobj);

      console.log(Obj);

      if (Obj != null) {
        alert("添加成功");
      }

      this.dialog = false;
    },
    async update(classId) {
      let updateobj = {
        classId:this.classId,
        classPerson: this.classPerson,
        classPersonTel: this.classPersonTel,
      };

      let userObj = await this.ajax.getSubmit("/api/cls/updateClass", updateobj);
      console.log(userObj);

      alert("修改成功");

      this.dialogVisible = false;
      this.findByItem();
    },   
    async findAllList() {
      
      let list = await this.ajax.getSubmit("/api/region/findAll");

      this.regionlist = list

      console.log(this.regionlist)

    },
  },
  created() {
    this.findByItem();
    this.findAllList();
  },
};
</script>

<style>
.check {
  display: flex;
}
.check > div:first-child {
  width: 450px;
  height: 200px;
}

.check > div:nth-child(2) {
  width: 300px;
  height: 200px;
}
</style>